<template>
  <el-drawer
    title="商品选择"
    :visible.sync="open"
    direction="rtl"
    custom-class="demo-drawer"
    ref="drawer"
    size="80%"
  >
    <!-- 抽屉内容（省略） -->

    <div class="app-container">

      <el-descriptions class="margin-top" title="仓库信息" :column="2" :size="size">
        <el-descriptions-item >
          <template slot="label">
          <i class="el-icon-s-home">&nbsp; &nbsp; &nbsp;仓库</i>
          </template>
          {{form.warehouseLabel}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">
            <i class="el-icon-s-data">&nbsp; &nbsp; &nbsp;库区</i>
          </template>
          {{form.warehouseAreaLabel}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">
            <i class="el-icon-collection">&nbsp; &nbsp; &nbsp;货架</i>
          </template>
          {{form.warehouseRackLabel}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">
            <i class="el-icon-d-caret">&nbsp; &nbsp; &nbsp;货位</i>
          </template>
          {{form.warehouseLocationLabel}}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">

        <el-form-item label="商品名称" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入商品名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商品编码" prop="productCode">
          <el-input
            v-model="queryParams.productCode"
            placeholder="请输入商品编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="入库时间" >
          <el-date-picker
            v-model="dateList"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="wmsProductsList" @selection-change="handleSelectionChange" stripe>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="入库单号" align="center" prop="inboundOrderNo" />
        <el-table-column label="商品名称" align="center" prop="productName" />
        <el-table-column label="商品编码" align="center" prop="productCode" />
        <!--      <el-table-column label="条形码" align="center" prop="barcode" />-->
        <el-table-column label="规格型号" align="center" prop="productSpec" />
        <el-table-column label="单位" align="center" prop="productUnit" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wms_product_unit" :value="scope.row.productUnit">
            </dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="采购价" align="center" prop="purchasePrice" />
        <el-table-column label="入库时间" align="center" prop="createTime" />
        <el-table-column label="剩余库存" align="center" prop="totalQuantity" >
          <template #default="scope">
            <span style="color: red">{{ scope.row.totalQuantity }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    </div>
    <!-- 底部按钮区域 -->
    <div class="drawer-footer">
      <div class="footer-right">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {getInboundProducts} from "@/api/system/wmsOutbound";

export default {
  name: "AddWmsInboundList",
  dicts:["wms_product_unit"],
  data() {
    return {
      open: false,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        productCode: null,
        productName: null,
        startTime: null,
        endTime: null,
        warehouseId:null,
        warehouseAreaId:null,
        warehouseRackId:null,
        warehouseLocationId:null,
      },
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      wmsProductsList: [],
      //上级表格数据
      parentWmsProductsList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateList:"",
      size: "medium",
      warehouseSelect:[],
      warehouseAreaSelect:[],
      warehouseRackSelect:[],
      warehouseLocationSelect:[],
      form:{
        warehouseLabel: null,
        warehouseAreaLabel: null,
        warehouseRackLabel: null,
        warehouseLocationLabel: null,
      },
    }
  },
  created() {
  },
  methods: {
    show(val) {
      console.log("val",val)
      this.open = true;
      this.queryParams.warehouseId = val.warehouseId;
      this.queryParams.warehouseAreaId = val.warehouseAreaId;
      this.queryParams.warehouseRackId = val.warehouseRackId;
      this.queryParams.warehouseLocationId = val.warehouseLocationId;
      this.form.warehouseLabel=val.warehouseLabel;
      this.form.warehouseAreaLabel=val.warehouseAreaLabel;
      this.form.warehouseRackLabel=val.warehouseRackLabel;
      this.form.warehouseLocationLabel=val.warehouseLocationLabel;
      this.getList();
    },
    handleConfirm() {
      // 确认逻辑
      this.$emit("goBlackParent",this.parentWmsProductsList)
      this.open = false;
      this.clearSelection();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.parentWmsProductsList=selection;
    },
    handleQuery(){
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery(){
      this.queryParams={
        pageNum: 1,
          pageSize: 10,
          productCode: null,
          productName: null,
          productSpec: null,
          productUnit: null,
      };
      this.getList();
    },
    getList(){
      this.loading = true
      if(this.dateList){
          this.queryParams.startTime = this.dateList[0];
          this.queryParams.endTime = this.dateList[1];
      }
      getInboundProducts(this.queryParams).then(response => {
        this.wmsProductsList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 新增清空选择方法
    clearSelection() {
      this.parentWmsProductsList = []; // 清空选择的数据
      this.$refs.drawer.$el.querySelector('.el-table').__vue__.clearSelection(); // 清空表格选择状态
    },
    // 在取消按钮绑定的方法中添加
    handleCancel() {
      this.open = false;
      this.clearSelection();
    },
  },
};
</script>

<style scoped lang="scss">
/* 底部按钮布局 */
.drawer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #ebeef5;
  background: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;

  .footer-right {
    display: flex;
    gap: 10px; /* 按钮间距 */
  }
}
</style>
